<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <!-- img  标签 显示上传成功后的图片 -->
    <br />
    <img src="" alt="" id="img" width="800" />
    <script>
      // 1 获取文件上传按钮
      let btnUpload = document.querySelector("#btnUpload");
      // 2 为按钮绑定单机事件函数
      btnUpload.addEventListener("click", function () {
        // 3 获取用户选择的文件列表
        let files = document.querySelector("#file1").files;
        if (files.length <= 0) {
          return alert("请选择上传文件");
        }
        let fd = new FormData();
        // 将用户选择的文件 添加到formdata中
        fd.append("avatar", files[0]);
        // 创建 xhr 实例
        let xhr = new XMLHttpRequest();
        // 调用open函数 指定请求类型和url地址
        xhr.open("POST", "http://www.liulongbin.top:3006/api/upload/avatar");
        // 发起请求
        xhr.send(fd);
        // 监听事件
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
            console.log(data);
            if (data.status === 200) {
              //上传图片成功
              document.querySelector("#img").src =
                "http://www.liulongbin.top:3006" + data.url;
            } else {
              //上传失败
              console.log("上传失败" + data.message);
            }
          }
        };
      });
    </script>
  </body>
</html>
